<script setup lang="ts">
import { ref } from 'vue'
import { addStudentInfAPI } from '@/api/studentInfo'

// 表单引用
const formRef = ref()

// 表单数据
const formData = ref({
  name: '',
  phone: '',
  gender: '',
  weiChatNumber: '',
  email: '',
  address: '',
  remark: '',
  gpa: '', // 新增成绩分数字段
  gradeAffiliation: ''  // 新增年级字段
})

// 校验规则
const rules = {
  name: {
    rules: [
      {
        required: true,
        errorMessage: '请输入姓名'
      },
      {
        minLength: 2,
        maxLength: 10,
        errorMessage: '姓名长度在2-10个字符之间'
      }
    ]
  },
  
  gender: {
    rules: [
      {
        required: true,
        errorMessage: '请选择性别'
      }
    ]
  },

  phone: {
    rules: [
      {
        required: true,
        errorMessage: '请输入手机号'
      },
      {
        pattern: /^1[3-9]\d{9}$/,
        errorMessage: '手机号格式错误，请输入正确的11位手机号'
      }
    ]
  },

  weiChatNumber: {
    rules: [
      {
        pattern: /^[a-zA-Z][\w-]{5,19}$/,
        errorMessage: '微信号格式不正确(6-20位，字母开头)'
      }
    ]
  },

  email: {
    rules: [
      {
        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
        errorMessage: '请输入正确的邮箱格式'
      }
    ]
  },

  gpa: {
    rules: [
      {
        pattern: /^(100|[1-9]?\d(\.\d{1,2})?)$/,
        errorMessage: '请输入0-100之间的分数，最多保留两位小数'
      }
    ]
  },

  gradeAffiliation: {
    rules: [
      {
        required: true,
        errorMessage: '请选择年级'
      }
    ]
  }
}

// 年级选项
const gradeOptions = ref([
  { value: '1', text: '一年级' },
  { value: '2', text: '二年级' },
  { value: '3', text: '三年级' },
  { value: '4', text: '四年级' },
  { value: '5', text: '五年级' },
  { value: '6', text: '六年级' },
  { value: '7', text: '初一' },
  { value: '8', text: '初二' },
  { value: '9', text: '初三' },
  { value: '10', text: '高一' },
  { value: '11', text: '高二' },
  { value: '12', text: '高三' }
])

// 通用字段校验方法
const validateField = async (fieldName: string) => {
  try {
    await formRef.value.validateField(fieldName)
    console.log(`${fieldName} 校验通过`)
  } catch (error) {
    console.log(`${fieldName} 校验失败:`, error)
  }
}

// 提交表单
const submitForm = async () => {
  try {
    // 触发表单校验
    await formRef.value.validate()
    
    console.log('提交表单数据:', formData.value)
    const res = await addStudentInfAPI(formData.value)
    console.log('提交结果:', JSON.stringify(res))
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    })
  } catch (error) {
    console.log('校验失败:', error)
    uni.showToast({
      title: '请检查表单信息',
      icon: 'none'
    })
  }
}

// 性别选项
const genderOptions = ref([
  { value: '1', text: '男' },
  { value: '0', text: '女' }
])

// 重置表单
const resetForm = () => {
  formData.value = {
    name: '',
    phone: '',
    gender: '',
    weiChatNumber: '',
    email: '',
    address: '',
    remark: '',
    gpa: '', // 新增成绩分数字段
    gradeAffiliation: ''  // 新增年级字段
  }
  // 清除校验状态
  formRef.value?.clearValidate()

  uni.showToast({
    title: '已重置',
    icon: 'none'
  })
}
</script>

<template>
  <view class="info-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-content">
        <text class="header-title">✨ 信息填写</text>
        <text class="header-desc">请完善您的个人资料</text>
      </view>
      <view class="header-decoration">
        <view class="circle circle-1"></view>
        <view class="circle circle-2"></view>
        <view class="circle circle-3"></view>
      </view>
    </view>

    <!-- 表单区域 -->
    <view class="form-wrapper">
      <uni-forms
        ref="formRef"
        :modelValue="formData"
        :rules="rules"
        validate-trigger="blur"
        label-position="top"
      >
        <view class="form-container">
          <!-- 基本信息卡片 -->
          <view class="info-card">
            <view class="card-header">
              <text class="card-title">👤 基本信息</text>
            </view>
            
            <!-- 姓名 -->
            <uni-forms-item label="姓名" name="name" required>
              <view class="input-wrapper">
                <uni-easyinput 
                  v-model="formData.name"
                  placeholder="请输入您的真实姓名"
                  :clearable="false"
                />
              </view>
            </uni-forms-item>

            <!-- 性别 -->
            <uni-forms-item label="性别" name="gender" required>
              <view class="gender-wrapper">
                <uni-data-checkbox
                  v-model="formData.gender"
                  :localdata="genderOptions"
                  mode="button"
                  selectedColor="#667eea"
                />
              </view>
            </uni-forms-item>

            <!-- 年级 -->
            <uni-forms-item label="年级" name="grade" required>
              <view class="input-wrapper">
                <uni-data-select
                  v-model="formData.gradeAffiliation"
                  :localdata="gradeOptions"
                  placeholder="请选择年级"
                  :clear="false"
                  border="surround"
                  @change="(e) => console.log('选择的年级:', e)"
                ></uni-data-select>
              </view>
            </uni-forms-item>

            <!-- 成绩分数 -->
            <uni-forms-item label="成绩分数" name="score">
              <view class="input-wrapper">
                <uni-easyinput
                  v-model="formData.gpa"
                  type="number"
                  placeholder="请输入成绩分数（0-100）"
                  :clearable="false"
                />
              </view>
            </uni-forms-item>

          </view>

          <!-- 联系方式卡片 -->
          <view class="info-card">
            <view class="card-header">
              <text class="card-title">📞 联系方式</text>
            </view>
            
            <!-- 手机号 -->
            <uni-forms-item label="手机号" name="phone" required>
              <view class="input-wrapper">
                <uni-easyinput 
                  v-model="formData.phone"
                  type="number"
                  placeholder="请输入11位手机号码"
                  :clearable="false"
                  :maxlength="11"
                />
              </view>
            </uni-forms-item>

            <!-- 微信 -->
            <uni-forms-item label="微信号" name="weiChatNumber">
              <view class="input-wrapper">
                <uni-easyinput 
                  v-model="formData.weiChatNumber"
                  placeholder="请输入微信号（选填）手机号是微信号可不填"
                  :clearable="false"
                />
              </view>
            </uni-forms-item>

            <!-- 邮箱 -->
            <uni-forms-item label="邮箱地址" name="email">
              <view class="input-wrapper">
                <uni-easyinput 
                  v-model="formData.email"
                  placeholder="请输入邮箱地址（选填）"
                  :clearable="false"
                />
              </view>
            </uni-forms-item>
          </view>

          <!-- 详细信息卡片 -->
          <view class="info-card">
            <view class="card-header">
              <text class="card-title">📍 详细信息</text>
            </view>
            
            <!-- 地址 -->
            <uni-forms-item label="详细地址" name="address">
              <view class="textarea-wrapper">
                <uni-easyinput 
                  v-model="formData.address"
                  type="textarea"
                  placeholder="请输入详细地址（选填）"
                  :clearable="false"
                />
              </view>
            </uni-forms-item>

            <!-- 备注 -->
            <uni-forms-item label="备注信息" name="remark">
              <view class="textarea-wrapper">
                <uni-easyinput 
                  v-model="formData.remark"
                  type="textarea"
                  placeholder="其他需要说明的信息（选填）"
                  :clearable="false"
                />
              </view>
            </uni-forms-item>
          </view>
        </view>
      </uni-forms>
    </view>

    <!-- 操作按钮 -->
    <view class="button-group">
      <view class="btn-wrapper">
        <button class="btn btn-reset" @click="resetForm">
          <text class="btn-icon">🔄</text>
          <text class="btn-text">重置</text>
        </button>
      </view>
      <view class="btn-wrapper">
        <button class="btn btn-submit" @click="submitForm">
          <text class="btn-icon">✅</text>
          <text class="btn-text">提交</text>
        </button>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
// 全局变量 - 改为白红色主题
$primary-color: #ff6b6b;
$secondary-color: #ff8e8e;
$accent-color: #ffa8a8;
$success-color: #51cf66;
$warning-color: #ffd43b;
$error-color: #ff6b6b;
$bg-color: #ffffff;
$card-bg: #ffffff;
$text-primary: #343a40;
$text-secondary: #868e96;
$border-color: #dee2e6;
$shadow-sm: 0 1px 3px rgba(255, 107, 107, 0.1);
$shadow-md: 0 4px 6px rgba(255, 107, 107, 0.15);
$shadow-lg: 0 10px 15px rgba(255, 107, 107, 0.2);
$border-radius: 20rpx;

// 动画定义
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8rpx);
  }
}

.info-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #ffffff 0%, #ffe0e0 25%, #ffb3b3 50%, #ff8080 95%, #ff4040 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  padding-bottom: 280rpx; // 增加底部间距，避免被tabbar遮挡
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.page-header {
  position: relative;
  padding: 80rpx 40rpx 60rpx;
  overflow: hidden;
  
  .header-content {
    position: relative;
    z-index: 2;
    animation: slideInUp 0.8s ease-out;
  }
  
  .header-title {
    display: block;
    font-size: 52rpx;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16rpx;
    letter-spacing: 2rpx;
    text-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
  }
  
  .header-desc {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
  }
  
  .header-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    
    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20rpx);
      
      &.circle-1 {
        width: 120rpx;
        height: 120rpx;
        top: 40rpx;
        right: 60rpx;
        animation: float 6s ease-in-out infinite;
      }
      
      &.circle-2 {
        width: 80rpx;
        height: 80rpx;
        top: 120rpx;
        right: 200rpx;
        animation: float 8s ease-in-out infinite reverse;
      }
      
      &.circle-3 {
        width: 60rpx;
        height: 60rpx;
        bottom: 60rpx;
        right: 40rpx;
        animation: float 10s ease-in-out infinite;
      }
    }
  }
}

.form-wrapper {
  margin-top: -40rpx;
  position: relative;
  z-index: 1;
}

.form-container {
  padding: 0 30rpx;
  
  // 重置 uni-forms-item 样式
  :deep(.uni-forms-item) {
    background: transparent;
    margin-bottom: 32rpx; // 增加底部间距避免重叠
    padding: 0;
    border: none;
    box-shadow: none;
    
    .uni-forms-item__label {
      font-size: 26rpx;
      font-weight: 600;
      color: #333333; // 改为黑色
      margin-bottom: 18rpx;
      position: relative;
      white-space: nowrap;
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      
      &::before {
        content: '●';
        color: $primary-color;
        margin-right: 6rpx;
        font-size: 18rpx;
      }
    }
    
    .uni-forms-item__error {
      color: $error-color;
      font-size: 26rpx;
      margin-top: 12rpx;
      padding-left: 36rpx;
      font-weight: 500;
    }
  }
}

.info-card {
  background: linear-gradient(145deg, #ffffff 0%, #fefefe 100%);
  border-radius: 28rpx;
  margin-bottom: 36rpx;
  padding: 45rpx 35rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 107, 107, 0.12);
  border: 2rpx solid rgba(255, 107, 107, 0.1);
  animation: slideInUp 0.6s ease-out;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    background: linear-gradient(90deg, $primary-color, $secondary-color, $accent-color);
  }
  
  &:nth-child(1) { animation-delay: 0.1s; }
  &:nth-child(2) { animation-delay: 0.3s; }
  &:nth-child(3) { animation-delay: 0.5s; }
  
  .card-header {
    margin-bottom: 32rpx;
    
    .card-title {
      font-size: 32rpx;
      font-weight: 700;
      color: $text-primary;
      display: flex;
      align-items: center;
      letter-spacing: 0.5rpx;
    }
  }
}

// 重新设计输入框样式
.input-wrapper, .textarea-wrapper {
  :deep(.uni-easyinput) {
    background: linear-gradient(145deg, #ffffff 0%, #fafafa 100%) !important;
    border: 2rpx solid #e8e8e8 !important;
    border-radius: 16rpx !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    width: 100% !important; // 确保宽度占满
    
    &:focus-within {
      border-color: $primary-color !important;
      background: #ffffff !important;
      box-shadow: 0 0 0 4rpx rgba(255, 107, 107, 0.1), 0 2rpx 8rpx rgba(255, 107, 107, 0.15) !important;
      transform: none !important;
    }
    
    .uni-easyinput__content {
      padding: 12rpx 20rpx !important; // 进一步减小高度，从16rpx减到12rpx
      
      .uni-easyinput__content-input {
        font-size: 28rpx !important;
        color: $text-primary !important;
        font-weight: 400 !important;
        line-height: 1.2 !important; // 进一步减小行高
        
        &::placeholder {
          color: #999999 !important;
          font-weight: 400 !important;
        }
      }
      
      .uni-easyinput__content-textarea {
        font-size: 28rpx !important;
        color: $text-primary !important;
        font-weight: 400 !important;
        min-height: 80rpx !important; // 进一步减小textarea高度
        line-height: 1.3 !important;
        
        &::placeholder {
          color: #999999 !important;
          font-weight: 400 !important;
        }
      }
    }
  }
}

// 姓名输入框特殊样式 - 取消宽度限制，让它更宽
.input-wrapper {
  &:first-of-type {
    :deep(.uni-easyinput) {
      max-width: none !important; // 取消宽度限制
      width: 100% !important; // 占满容器宽度
    }
  }
}

// 性别选择器美化
.gender-wrapper {
  margin-top: 16rpx;
  
  :deep(.uni-data-checklist) {
    display: flex;
    gap: 20rpx;
    
    .checklist-group {
      flex: 1;
      
      .checklist-box {
        background: linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
        border: 2rpx solid #e8e8e8;
        border-radius: 16rpx;
        padding: 20rpx 16rpx;
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        
        &:hover::before {
          opacity: 1;
        }
        
        &.is-checked {
          background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
          border-color: $primary-color;
          color: #ffffff;
          transform: scale(1.01);
          box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.2);
        }
        
        .radio__inner {
          display: none;
        }
        
        .checklist-text {
          font-size: 28rpx;
          font-weight: 500;
          letter-spacing: 0.5rpx;
        }
      }
    }
  }
}

.button-group {
  position: fixed;
  bottom: 100rpx; // 调整位置，避免被tabbar遮挡
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 30%, #ffffff 100%);
  padding: 45rpx 30rpx;
  padding-bottom: calc(45rpx + env(safe-area-inset-bottom));
  backdrop-filter: blur(30rpx);
  border-top: 2rpx solid rgba(255, 107, 107, 0.1);
  display: flex;
  gap: 24rpx;
  animation: slideInUp 1s ease-out 0.8s both;
  z-index: 999; // 确保在最上层
  
  .btn-wrapper {
    flex: 1;
  }
  
  .btn {
    width: 100%;
    height: 96rpx;
    border-radius: 48rpx;
    font-size: 34rpx;
    font-weight: 700;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 1rpx;
    
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: all 0.6s ease;
    }
    
    &:active::before {
      width: 400rpx;
      height: 400rpx;
    }
    
    &:active {
      transform: scale(0.96);
    }
    
    .btn-icon {
      font-size: 32rpx;
    }
    
    .btn-text {
      font-size: 34rpx;
      font-weight: 700;
    }
    
    &.btn-reset {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      color: $text-secondary;
      border: 3rpx solid #dee2e6;
      box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
      
      &:hover {
        background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        transform: translateY(-6rpx);
        box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
      }
    }
    
    &.btn-submit {
      background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
      color: #ffffff;
      box-shadow: 0 8rpx 25rpx rgba(255, 107, 107, 0.4);
      
      &:hover {
        transform: translateY(-6rpx);
        box-shadow: 0 12px 30px rgba(255, 107, 107, 0.5);
      }
    }
  }
}

// 响应式设计
@media (max-width: 750rpx) {
  .info-card {
    margin-left: 15rpx;
    margin-right: 15rpx;
    padding: 35rpx 28rpx;
  }
  
  .form-container {
    padding: 0 20rpx;
  }
  
  .button-group {
    padding: 35rpx 20rpx;
    gap: 20rpx;
  }
}

// 在 <style> 部分添加
:deep(.uni-data-select) {
  .uni-select {
    border: 2rpx solid #e8e8e8;
    border-radius: 16rpx;
    padding: 12rpx 20rpx;
    background: linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:focus-within {
      border-color: $primary-color;
      background: #ffffff;
      box-shadow: 0 0 0 4rpx rgba(255, 107, 107, 0.1), 0 2rpx 8rpx rgba(255, 107, 107, 0.15);
    }

    .uni-select__input-box {
      height: auto;
      line-height: normal;
      padding: 0;

      .uni-select__input-text {
        font-size: 28rpx;
        color: $text-primary;
        font-weight: 400;
      }

      .uni-select__input-placeholder {
        font-size: 28rpx;
        color: #999999;
        font-weight: 400;
      }
    }

    .uni-select__selector {
      border-radius: 16rpx;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);

      .uni-select__selector-item {
        padding: 16rpx 20rpx;
        font-size: 28rpx;

        &.active {
          color: $primary-color;
          background-color: rgba(255, 107, 107, 0.1);
        }
      }
    }
  }
}
</style> 